import Loading from 'vant/es/loading'
import 'vant/es/loading/style/less'
import './index.less'
import variable from './_variable'

export default {
  components: {
    Loading
  },
  props: {
    ...Loading.props,
    tip: { type: String },
    size: {
      type: String,
      default: '1rem'
    },
    color: {
      type: String,
      default: variable['c-color-primary']
    },
    loading: {
      type: Boolean,
      default: true
    }
  },
  render() {
    const { tip, loading } = this.$props
    const haveChildren = this.$scopedSlots.default
    const loadingScopedSlots = {}

    if (tip) {
      loadingScopedSlots.default = () => tip
    }

    return haveChildren ? (
      <div class="c-lerr3o">
        {this.$scopedSlots.default()}
        {loading && (
          <div class="c-lerr3o-mask">
            <div class="c-lerr3o-loading">
              <Loading
                attrs={this.$attrs}
                props={this.$props}
                on={this.$listeners}
                scopedSlots={loadingScopedSlots}
              />
            </div>
          </div>
        )}
      </div>
    ) : (
      loading && (
        <Loading
          attrs={this.$attrs}
          props={this.$props}
          on={this.$listeners}
          scopedSlots={loadingScopedSlots}
        />
      )
    )
  }
}
